<style>
  .map {
    height: 400px;
    width: 100%;
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <div class="tab-content" style="height:100%;">
          <div id="tab_1" class="tab-pane active" style="height:100%;">
            <div class="ibox float-e-margins form">
              <div class="col-md-12">
                <div class="form-inline row" style="margin-bottom: 10px;">
                  <div class="form-group">
                    <div class="input-group">
                      <input id="longitude" type="text" placeholder="经度" class="input-sm form-control"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <input id="latitude" type="text" placeholder="纬度" class="input-sm form-control"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group" style="width: 350px;">
                      <input id="address" type="text" placeholder="地址" class="input-sm form-control" style="width: 350px;"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <button type="button" class="btn btn-sm btn-primary" @click="submit()">提交</button>
                    <button type="button" class="btn btn-sm btn-dafault" @click="lbox.closeMyBoxLayer()">返回</button>
                  </div>
                </div>
              </div>
              <div class="clearfix "></div>
              <baidu-map
                ak='keY5Bh4GNuG79iCNIGgSl31pXpmjjW50'
                :mapClick="false"
                :center="center"
                :zoom="zoom"
                :dragging="true"
                :scroll-wheel-zoom="true"
                class="map"
                @ready="handler"
                @click="getClickInfo"
                @moving="syncCenterAndZoom"
                @moveend="syncCenterAndZoom"
                @zoomend="syncCenterAndZoom"
              >
                <!--  地理位置的搜索功能-->
                <bm-local-search
                  :keyword="keyword"
                  :auto-viewport="true"
                  :location="location"
                ></bm-local-search>
                <!--  缩放比例尺的展示-->
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <!--  定位-->
                <bm-geolocation
                  anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                  :showAddressBar="true"
                  :autoLocation="true"
                ></bm-geolocation>
                <!--  添加一个小红点的，并将当前的经纬度写入数据中-->
                <bm-marker :position="{lng:marker.lng, lat: marker.lat}"></bm-marker>
              </baidu-map>
              <div>
                <form style="position: absolute;top:390px;background: #ffffff;border: 1px #eeeeee solid;padding: 10px;" id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="searchMapArea()">
                  <div class="form-group" style="width: 350px;">
                    <input v-model="keyword" type="text" id="searchAddress" placeholder="请输入地址查询" class="input-sm form-control" style="width: 350px;"/>
                  </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-sm btn-info">地址搜索</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import $ from '@/assets/js/jquery-vendor.js'
  import '@/assets/js/validate/validation-vendor.js'
  import {BaiduMap, BmCityList, BmGeolocation, BmLocalSearch, BmMarker, BmNavigation, BmView} from 'vue-baidu-map'

  let myGeo;
  let myLocal;
  export default {
    components: {
      BaiduMap, BmCityList, BmGeolocation, BmLocalSearch, BmMarker, BmNavigation, BmView
    },
    data() {
      return {
        // 百度地图初始化数据
        baidumapSwitch: false,
        center: {lng: 104.859354, lat: 29.76873},
        marker: {lng: 104.859354, lat: 29.76873},
        zoom: 12,
        location: '',
        keyword: '河流'
      }
    },
    mounted: function () {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      that.staff.init();
    },
    methods: {
      submit() {
        let that = this;
        const longitude = $('#longitude').val();
        const latitude = $('#latitude').val();
        const address = $('#address').val();
        if (longitude && latitude && address) {
          // if (confirm('确认覆盖设备位置信息么!')) {
            parent.$vueApp.setMapSite(longitude, latitude, address);
            that.lbox.closeMyBoxLayer();
          // }
        }
      },
      // 百度地图初始化（这个一定要！否则地图回加载不出来）
      handler({BMap, map}) {
        // 获取逆解析方法实例
        myGeo = new BMap.Geocoder();
        myLocal = new BMap.LocalSearch(map, {
          renderOptions: {map: map}
        });
        map.enableScrollWheelZoom(true);
      },
      // 点击获取到当前经纬度
      getClickInfo(e) {
        let pt = e.point;
        this.marker.lng = pt.lng;
        this.marker.lat = pt.lat;
        $('#longitude').val(pt.lng);
        $('#latitude').val(pt.lat);
        $('#address').val('');
        myGeo.getLocation(pt, rs => {
          var addComp = rs.addressComponents;
          // console.info(addComp.city);
          $('#longitude').val(pt.lng);
          $('#latitude').val(pt.lat);
          console.info(addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber + ', ' + rs.address);
          $('#address').val(rs.address);
        });
      },
      // 双向绑定经纬度以及缩放尺寸
      syncCenterAndZoom(e) {
        const {lng, lat} = e.target.getCenter();
        this.center.lng = lng;
        this.center.lat = lat;
        this.zoom = e.target.getZoom();
      },
      searchMapArea() {
        let address = this.keyword;// $('#searchAddress').val();
        if (myLocal && address && address.length > 0) {
          myLocal.search(address);
        }
      }
    }
  }
</script>

